<!--
 * @Descripttion: 编辑视频
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:32:07
-->
<template>
  <div class="lb-websit-edit-video">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="videoForm"
        :rules="videoFormRules"
        ref="videoForm"
        label-width="120px"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="videoForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="videoForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 686 * 686</lb-tool-tips>
        </el-form-item>
        <el-form-item label="视频分类" prop="category_id">
          <el-select
            v-model="videoForm.category_id"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频" prop="video">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="videoForm.video"
              placeholder="请选择视频文件"
            />
            <lb-cover
              type="button"
              fileType="video"
              @selectedFiles="getVideo"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="videoForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('videoForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      options: [],
      videoForm: {
        title: '',
        cover: '',
        video: '',
        top: '',
        category_id: ''
      },
      videoFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入内容',
          trigger: 'blur'
        },
        cover: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        video: {
          required: true,
          type: 'string',
          message: '请上传视频',
          trigger: 'change'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入内容',
          trigger: 'blur'
        },
        category_id: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'change'
        }
      }
    }
  },
  created () {
    let { wid, id } = this.$route.query
    this.videoForm.modular_id = wid
    this.videoForm.id = id
    this.navTitle = this.$t(id ? 'menu.WebsiteVideoEdit' : 'menu.WebsiteVideoAdd')
    if (this.videoForm.id) {
      this.getFormInfo()
    }
    this.getCate()
  },
  methods: {
    async getCate () {
      let { data } = await this.$api.websiteVideoCategoryAll({
        modular_id: this.videoForm.modular_id
      })
      this.options = data
    },
    getFormInfo () {
      let { id } = this.videoForm
      this.$api
        .getWebsitContentInfo({ modular_id: this.videoForm.modular_id, id })
        .then(res => {
          if (res.code === 200) {
            for (let key in this.videoForm) {
              this.videoForm[key] = res.data[key]
            }
            this.videoForm.cover = [{ url: res.data.cover }]
          }
        })
    },
    /**
     * @method 提交表单信息
     */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { videoForm } = this
          let subForm = JSON.parse(JSON.stringify(videoForm))
          subForm.cover = videoForm.cover.map(item => {
            return item.url
          })
          if (this.videoForm.id) {
            this.$api.editWebsiteContentInfo(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.addWebsiteContentInfo(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },
    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.go(-1)
    },
    getVideo (file) {
      let len = file.length - 1
      this.videoForm.video = file[len].url
    },
    getCover (img) {
      this.videoForm.cover = img
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-websit-edit-video {
  width: 100%;
  .page-main {
    width: 100%;
    .el-input,
    .el-input-number,
    .el-select {
      width: 300px;
    }
  }
}
</style>
